@import '../../style/mixins.scss';
@import '../../style/common/animate.scss';

.day,
.c_b_p_desc_readmore {
  display: none;
}

.cards-list,
.entrylist {
  margin: 1rem 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
}

.entrylistTitle {
  margin-top: 1rem;
}

.custom-card,
.entrylistItem {
  background-color: var(--geek-color-1);
  border-radius: 4px;
  box-sizing: border-box;
  flex-grow: 1;
  animation: content-in 0.5s ease-in 0s;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.custom-card {
  display: flex;
  flex-direction: column;
  word-break: break-all;

  &.top {
    .custom-card-title {
      &:before {
        content: '📌';
        // font-weight: bold;
        // color: #f14668;
        margin-right: 4px;
      }
    }
  }
}

.custom-card-title {
  padding: 20px 20px 8px;
  font-size: 14px;
  color: var(--geek-color-10);

  // &:before {
  //   content: '\f15c';
  //   font-weight: normal;
  //   margin-right: 8px;
  // }

  &:hover {
    color: var(--color-primary);
  }
}

.custom-card-desc {
  color: var(--geek-color-8);
  padding: 0 20px 8px;
  flex-grow: 1;
  font-size: 12px;

  .c_b_p_desc {
    line-height: 1.8;
  }

  .MJXp-math {
    white-space: break-spaces;
  }

  .MJXp-merror {
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font-size: 100%;
  }

  .MathJax .noError {
    padding: 0;
    border: none;
    color: inherit;
    font-size: 100%;
    white-space: break-spaces;
  }
}

.custom-card-actions {
  display: flex;
  align-items: center;
  padding: 0 20px 10px;

  div {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
    color: var(--geek-color-8);
    
    i {
      margin-right: 4px;
    }
  }

  a:first-of-type {
    margin-left: auto;
    margin-right: 10px;

    button {
      background: none;
      border: 1px solid var(--color-primary);
      color: var(--color-primary);
    }
  }

  button {
    margin-left: auto;
    @include btn(primary);
  }

  li:before {
    font-weight: normal;
  }
}

@media screen and (min-width: 1920px) {
  .cards-list {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media screen and (max-width: 1175px) {
  .cards-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media screen and (max-width: 908px) {
  .cards-list {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .custom-card,
  .entrylistItem {
    &:hover {
      transition: none;
      box-shadow: none;
    }
  }
}
